<template>
  <div ref="graphWrapRef" style="height:500px;position: relative;">
    <h2>我的第五个mxgraph</h2>
    <button @click="doExport2Console">在console中查看xml</button>
    <div id="graphcontainer5-5" ref="graphcontainer5-5" class="graphWrap2 graph-edit"></div>
  </div>
</template>

<script>
import _ from "lodash";
import mxgraph from '@/utils/mxgraph'
const { mxEvent, mxRubberband, mxGraph, mxConstants, mxGraphModel, mxClient,
  mxUtils, mxImage, mxCellOverlay, mxGeometry, mxCell, mxCodec } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel
const MxImage = mxImage
const MxCellOverlay = mxCellOverlay
const MxCodec = mxCodec

export default {

  data() {
    return {
      graph: null
    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      // 
      var container = document.getElementById('graphcontainer5-5')
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      this.graph = graph
      graph.setTooltips(true);

      // Enables rubberband selection
      new MxRubberband(graph)

      // Gets the default parent for inserting new cells. This
      // is normally the first child of the root (ie. layer 0).
      var parent = graph.getDefaultParent()
      this.initStyle(graph)

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate()
      try {
        var start = graph.insertVertex(parent, null, 'start', 20, 20, 75, 75, 'start')
        var bill = graph.insertVertex(parent, null, 'bill', 180, 20, 75, 75, 'bill')
        var check = graph.insertVertex(parent, null, 'check', 350, 20, 75, 75, 'check')
        var end = graph.insertVertex(parent, null, 'end', 500, 20, 75, 75, 'end')
        graph.insertEdge(parent, null, '', start, bill)
        graph.insertEdge(parent, null, '', bill, check)
        graph.insertEdge(parent, null, '', check, end)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
     // this.initCellOverlay(graph)
      this.initEdgeOverlay(graph)
    },
    initStyle(graph) {
      var vStyle = graph.getStylesheet().getDefaultVertexStyle()

      var style = _.cloneDeep(vStyle)
      style[mxConstants.STYLE_FONTSIZE] = '12'
      style[mxConstants.STYLE_FONTCOLOR] = 'black'
      style[mxConstants.STYLE_FILLCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = true
      style[mxConstants.STYLE_FONTSTYLE] = 1
      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL
      style[mxConstants.STYLE_STROKECOLOR] = 'black'
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = false
      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE] = '/images/start.png'
      style[mxConstants.STYLE_IMAGE_WIDTH] = '40'
      style[mxConstants.STYLE_IMAGE_HEIGHT] = '40'
      style[mxConstants.STYLE_SPACING_TOP] = '50'
      style[mxConstants.STYLE_SPACING] = '8'
      const styleList = [
        { cguid: 'start', imgUrl: '/images/start.png' },
        { cguid: 'bill', imgUrl: '/images/bill.png' },
        { cguid: 'check', imgUrl: '/images/check.png' },
        { cguid: 'end', imgUrl: '/images/end.png' }
      ]
      for (var i = 0; i < styleList.length; i++) {
        const item = styleList[i]
        const newStyle = _.cloneDeep(style)
        newStyle[mxConstants.STYLE_IMAGE] = item.imgUrl
        graph.getStylesheet().putCellStyle(item.cguid, newStyle)
      }

    },

    getAllVertex(graph) {
      //在所有的顶点没有子模块的情况下
      const defaultParent = graph.getDefaultParent()
      const model = graph.getModel()
      return model.getChildVertices(defaultParent)
    },
    getAllEdge(graph) {
      //在所有的顶点没有子模块的情况下
      const defaultParent = graph.getDefaultParent()
      const model = graph.getModel()
      return model.getChildEdges(defaultParent)
    },
    initCellOverlay(graph) {
      var vertices = this.getAllVertex(graph)
      vertices.forEach(cell => {
        if (cell.style === 'bill') {
          var rightImage = new MxImage('/images/ok.png', 16, 16);
          var rightLay = new MxCellOverlay(rightImage, '我的意见是同意',
            mxConstants.ALIGN_RIGHT,
            mxConstants.ALIGN_TOP,
            new mxPoint(0, 0),
            mxConstants.CURSOR_TERMINAL_HANDLE)
          graph.addCellOverlay(cell, rightLay);
        }
        if (cell.style === 'check') {
          var errorImage = new MxImage('/images/cancel.png', 16, 16);
          var errorLay = new MxCellOverlay(errorImage, '我的意见是反对')
          graph.addCellOverlay(cell, errorLay);
        }
      })
    },
    //返回值是传入的顶点，以及该顶点的后续顶点
    getAfterCells(graph, cell) {
      var cells = []
      graph.traverse(cell, true, function (vertex) {
        cells.push(vertex);

        return true;
      });
      return cells
    },
    //返回值是传入的顶点，以及该顶点的前置顶点
    getBeforeCells(graph, cell) {
      var cells = []
      graph.traverse(cell, true, function (vertex) {
        cells.push(vertex);
        return true;
      },null,null,true);
      return cells
    },
    initEdgeOverlay(graph) {
      // graph.moveCells(graph.getChildCells(null, true, true), 100, 100);
      var vertices = this.getAllEdge(graph)
      vertices.forEach(cell => {
         var that=this
        var addImage = new MxImage('/images/add.png', 16, 16);
        var addtLay = new MxCellOverlay(addImage, '添加节点',
          mxConstants.ALIGN_CENTER,
          mxConstants.ALIGN_BOTTOM,
          new mxPoint(0, 20),
          mxConstants.CURSOR_TERMINAL_HANDLE)

        addtLay.addListener(mxEvent.CLICK, function (sender, evt) {
         
          const defaultParent = graph.getDefaultParent()
          console.log(sender, evt, evt.properties.cell)
          var oldEdge = evt.properties.cell
          var sourceCell=oldEdge.source
          var geo=sourceCell.getGeometry();
        
         var newVertex = graph.createVertex(defaultParent, null, '我是新的节点', geo.x, geo.y, 75, 75, 'bill');
         var newEdge = graph.splitEdge(cell, [newVertex], null, 0, 0)
            var afterCells=that.getAfterCells(graph,newVertex)
            var beforeCells=that.getBeforeCells(graph,newVertex)
             console.log(beforeCells,'beforeCells')
          console.log(afterCells,'afterCells')
          graph.moveCells(afterCells, 150, 0);
        });

        graph.addCellOverlay(cell, addtLay);
      })
    },
    doExport2Console() {
      var enc = new MxCodec()
      var node = enc.encode(this.graph.getModel())
      var mxgraphXml = mxUtils.getPrettyXml(node)
      console.log(mxgraphXml)
    },
  },
}
</script>
<style scoped>
.graphWrap2 {
  position: relative;
  overflow: hidden;
  width: 821px;
  height: 341px;
  cursor: default;
  border: 1px solid grey;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


